// bootstrap variables for flat design
//
// Variables
// --------------------------------------------------
// @import '~bootstrap-sass/assets/stylesheets/bootstrap';
// == Colors
//
//##

// Color swatches
$turquoise:                 #1abc9c;
$green-sea:                 #16a085;

$emerald:                   #2ecc71;
$nephritis:                 #27ae60;

$peter-river:               #3498db;
$belize-hole:               #2980b9;

$amethyst:                  #9b59b6;
$wisteria:                  #8e44ad;

$wet-asphalt:               #34495e;
$midnight-blue:             #2c3e50;

$sun-flower:                #f1c40f;
$orange:                    #f39c12;

$carrot:                    #e67e22;
$pumpkin:                   #d35400;

$alizarin:                  #e74c3c;
$pomegranate:               #c0392b;

$clouds:                    #ecf0f1;
$silver:                    #bdc3c7;

$concrete:                  #95a5a6;
$asbestos:                  #7f8c8d;

// Grays
// $gray:                      $concrete;
// $gray-light:                $silver;
$inverse:                   white;

$gray-darker:            lighten(#000, 13.5%); // #222
$gray-dark:              lighten(#000, 20%);   // #333
$gray:                   lighten(#000, 33.5%); // #555
$gray-light:             lighten(#000, 46.7%); // #777
$gray-lighter:           lighten(#000, 93.5%); // #eee
$dark:					 #000;
// Brand colors
$brand-primary:             $turquoise;
$brand-secondary:           $green-sea;
$brand-success:             $emerald;
$brand-warning:             $sun-flower;
$brand-danger:              $alizarin;
// $brand-info:                $peter-river;
$brand-info:                $emerald;


//== Scaffolding
//
//## Settings for some of the most global styles.

$body-bg:                   #ecf0f1;
$text-color:                $gray-dark;

//** Global textual link color.
$link-color:                $brand-primary;
$link-hover-color:          $turquoise;


//== Typography
//
//## Font, line-height for body text, headings, and more.

$font-family-base:          'Open Sans', Helvetica, Arial, sans-serif;
$font-family-demo:          "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-monospace:     Monaco, Menlo, Consolas, "Courier New", monospace;
$font-family-narrow:		'Open Sans Condensed', 'Open Sans', Helvetica;
$font-size-base:            14px;

$font-size-h1:            floor(($font-size-base * 2.6)); // ~36px
$font-size-h2:            floor(($font-size-base * 2.15)); // ~30px
$font-size-h3:            ceil(($font-size-base * 1.7)); // ~24px
$font-size-h4:            ceil(($font-size-base * 1.25)); // ~18px
$font-size-h5:            $font-size-base;
$font-size-h6:            ceil(($font-size-base * 0.85)); // ~12px

$line-height-base:          1.428571429; // 20/14
$line-height-computed:      floor($font-size-base * $line-height-base); // ~31px

$headings-font-family:      inherit;
$headings-font-weight:      700;
$headings-line-height:      1.1;
$headings-color:            $gray-dark;
$headings-small-color:      $gray-dark;


//== Iconography
//
//## Specify custom locations of the include Glyphicons icon font.

$icon-font-path:            "../fonts/";
$icon-font-name:            "glyphicons-halflings-regular";
$icon-font-svg-id:          "glyphicons_halflingsregular";

//** Icon sizes for use in components
$icon-normal:               16px;
$icon-medium:               18px;
$icon-large:                32px;


//== Components
//
//## Define common padding and border radius sizes and more.
$padding-base-vertical:     0px;
$padding-base-horizontal:   6px;

$padding-large-vertical:    10px;
$padding-large-horizontal:  16px;

$padding-small-vertical:    1rem;
$padding-small-horizontal:  1.5rem;

$padding-xs-vertical:       1px;
$padding-xs-horizontal:     5px;

$line-height-large:         1.33;
$line-height-small:         1.5;

$border-radius-base:        1px;
$border-radius-large:       3px;
$border-radius-small:       0px;

//** Default font-size in components
$component-font-size-base:  ceil($font-size-base * 0.833); // ~15px

//== Buttons
//
//## For each of Flat UI's buttons, define text, background, font size and height.

$btn-font-size-base:         $component-font-size-base;
$btn-font-size-xs:           ceil($component-font-size-base * 0.80);   // ~12px
$btn-font-size-sm:           floor($component-font-size-base * 0.867); // ~13px
$btn-font-size-lg:           ceil($component-font-size-base * 1.133);  // ~17px
$btn-font-size-hg:           floor($component-font-size-base * 1.467); // ~22px

$btn-line-height-base:       1.4;   // ~21px
$btn-line-height-hg:         1.227; // ~27px
$btn-line-height-lg:         1.471; // ~25px
$btn-line-height-sm:         1.385; // ~16px
$btn-line-height-xs:         1.083; // ~13px

$btn-social-font-size-base:   floor($component-font-size-base * 0.867); // ~13px
$btn-social-line-height-base: 1.077;  // ~14px

$btn-font-weight:            normal;

$btn-default-color:              #333;
$btn-default-bg:                 #fff;
$btn-default-border:             #ccc;

$btn-primary-color:              #fff;
$btn-primary-bg:                 $brand-primary;
$btn-primary-border:             darken($btn-primary-bg, 5%);

$btn-success-color:              #fff;
$btn-success-bg:                 $brand-success;
$btn-success-border:             darken($btn-success-bg, 5%);

$btn-info-color:                 #fff;
$btn-info-bg:                    $brand-info;
$btn-info-border:                darken($btn-info-bg, 5%);

$btn-warning-color:              #fff;
$btn-warning-bg:                 $brand-warning;
$btn-warning-border:             darken($btn-warning-bg, 5%);

$btn-danger-color:               #fff;
$btn-danger-bg:                  $brand-danger;
$btn-danger-border:              darken($btn-danger-bg, 5%);

$btn-link-disabled-color:        $gray-light;


//== Forms
//
//##

$input-font-size-base:      $component-font-size-base;
$input-font-size-small:     floor($component-font-size-base * 0.867); // ~13px
$input-font-size-large:     ceil($component-font-size-base * 1.133); // ~17px
$input-font-size-huge:      floor($component-font-size-base * 1.467); // ~22px

$input-line-height-base:    1.467; // ~22px
$input-line-height-small:   1.462; // ~19px
$input-line-height-large:   1.235; // ~21px
$input-line-height-huge:    1.318; // ~29px

$input-icon-font-size:      ceil($component-font-size-base * 1.333);  // ~20px

$input-bg:                  $inverse;
$input-bg-disabled:         mix($gray, white, 10%);

$input-height-small:        35px;
$input-height-base:         41px;
$input-height-large:        45px;
$input-height-huge:         53px;

$input-border-radius:       $border-radius-large;

$legend-color:              inherit;


//== Forms
//
//##

$input-font-size-base:      $component-font-size-base;
$input-font-size-small:     floor($component-font-size-base * 0.867); // ~13px
$input-font-size-large:     ceil($component-font-size-base * 1.133); // ~17px
$input-font-size-huge:      floor($component-font-size-base * 1.467); // ~22px

$input-line-height-base:    1.467; // ~22px
$input-line-height-small:   1.462; // ~19px
$input-line-height-large:   1.235; // ~21px
$input-line-height-huge:    1.318; // ~29px

$input-icon-font-size:      ceil($component-font-size-base * 1.333);  // ~20px

$input-bg:                  $inverse;
$input-bg-disabled:         mix($gray, white, 10%);

$input-height-small:        35px;
$input-height-base:         41px;
$input-height-large:        45px;
$input-height-huge:         53px;

$input-border-radius:       $border-radius-large;

$legend-color:              inherit;

//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Extra small screen / phone
$screen-xs-min:               480px;

// Small screen / tablet
$screen-sm-min:               768px;

// Medium screen / desktop
$screen-md-min:               992px;

// Large screen / wide desktop
$screen-lg-min:               1200px;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:               ($screen-sm-min - 1);
$screen-sm-max:               ($screen-md-min - 1);
$screen-md-max:               ($screen-lg-min - 1);

//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
$grid-columns:                12;
//** Padding between columns. Gets divided in half for the left and right.
$grid-gutter-width:           2rem;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint:       $screen-sm-min;
//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max:   ($grid-float-breakpoint - 1);

//== Pagination
//
//##

$pagination-color:           mix($brand-primary, white, 20%);


//== Pager
//
//##

$pager-padding:              9px 15px 10px;

//== Container sizes
//
//## Define the maximum width of `.container` for different screen sizes.

// Small screen / tablet
$container-tablet:             (720 + $grid-gutter-width) !default;
//** For `$screen-sm-min` and up.
$container-sm:                 $container-tablet !default;

// Medium screen / desktop
$container-desktop:            (940 + $grid-gutter-width) !default;
//** For `$screen-md-min` and up.
$container-md:                 $container-desktop !default;

// Large screen / wide desktop
$container-large-desktop:      (1140 + $grid-gutter-width) !default;
//** For `$screen-lg-min` and up.
$container-lg:                 $container-large-desktop !default;


//== Navbar
//
//##

// Basics of a navbar
$zindex-navbar:            1000;
$zindex-dropdown:          1000;
$zindex-popover:           1060;
$zindex-tooltip:           1070;
$zindex-navbar-fixed:      1030;
$zindex-modal-background:  1040;
$zindex-modal:             1050;

$navbar-height-base:         53px;
$navbar-height-large:        76px;
$navbar-input-line-height:   1.4; // ~21px
$navbar-margin-bottom:       $line-height-computed;
$navbar-border-radius:       $border-radius-small;

$navbar-height:                    40px;
// $navbar-border-radius:             $border-radius-base;
$navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) - 2;
$navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2);
// $navbar-collapse-max-height:       340px;

$navbar-default-color:             #777;
$navbar-default-bg:                #f8f8f8;
$navbar-default-border:            darken($navbar-default-bg, 6.5%);

// Navbar links
$navbar-default-link-color:                #777;
$navbar-default-link-hover-color:          #333;
$navbar-default-link-hover-bg:             transparent;
$navbar-default-link-active-color:         #555;
$navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%);
$navbar-default-link-disabled-color:       #ccc;
$navbar-default-link-disabled-bg:          transparent;

// Navbar brand label
$navbar-default-brand-color:               $navbar-default-link-color;
$navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%);
$navbar-default-brand-hover-bg:            transparent;

// Navbar toggle
$navbar-default-toggle-hover-bg:           #ddd;
$navbar-default-toggle-icon-bar-bg:        #888;
$navbar-default-toggle-border-color:       #ddd;

// customed
// Navbar nav carets
$navbar-default-caret-color:          $navbar-default-link-color;
$navbar-default-caret-hover-color:    $navbar-default-link-hover-color;
$navbar-default-caret-active-color:   $navbar-default-link-active-color;

// Navbar form
// $navbar-default-form-placeholder:     adjust-hue(tint($brand-primary, 60%), 2);
// $navbar-default-form-icon:            desaturate(tint($brand-primary, 45%), 2%);
// $navbar-default-form-border:          shade($navbar-default-bg, 3%);


// Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-divider:              darken($brand-primary, 3%);

// Reset inverted navbar basics
$navbar-inverse-color:                $gray-light;
$navbar-inverse-bg:                   #222;
$navbar-inverse-border:               darken($navbar-inverse-bg, 10%);

// Inverted navbar links
$navbar-inverse-link-color:           $inverse;
$navbar-inverse-link-hover-color:     $brand-secondary;
$navbar-inverse-link-hover-bg:        transparent;
$navbar-inverse-link-active-color:    $navbar-inverse-link-color;
$navbar-inverse-link-active-bg:       $brand-secondary;
$navbar-inverse-link-disabled-color:  #444;
$navbar-inverse-link-disabled-bg:     transparent;

// Navbar nav carets
$navbar-inverse-caret-color:          lighten(desaturate($brand-primary, 7%), 9%);
$navbar-inverse-caret-hover-color:    $navbar-inverse-link-hover-color;
$navbar-inverse-caret-active-color:   $navbar-inverse-link-active-color;

// Inverted navbar brand label
$navbar-inverse-brand-color:          $navbar-inverse-link-color;
$navbar-inverse-brand-hover-color:    $navbar-inverse-link-hover-color;
$navbar-inverse-brand-hover-bg:       transparent;

// Inverted navbar toggle
$navbar-inverse-toggle-color:         $navbar-inverse-link-color;
$navbar-inverse-toggle-hover-color:   $navbar-inverse-link-hover-color;

// Navbar form
$navbar-inverse-form-bg:              darken($brand-primary, 6%);
$navbar-inverse-form-placeholder:     desaturate(lighten($brand-primary, 13%), 7%);
$navbar-inverse-form-icon:            desaturate(lighten($brand-primary, 13%), 6%);
$navbar-inverse-form-border:          $navbar-inverse-divider;

// Dropdown menu
$navbar-inverse-dropdown-arrow:             $navbar-inverse-bg;
$navbar-inverse-dropdown-bg:                $navbar-inverse-bg;
$navbar-inverse-dropdown-link-color:        mix($navbar-inverse-bg, $navbar-inverse-color, 15%);
$navbar-inverse-dropdown-link-hover-color:  $inverse;
$navbar-inverse-dropdown-link-hover-bg:     $brand-secondary;


//== Dropdown Menu
//
//##
$bg-dark-color: #323538;
$dropdown-background:        $bg-dark-color;
$dropdown-bg: 	$bg-dark-color;
$dropdown-link-hover-color:	$inverse;
$dropdown-link-hover-bg: $brand-primary;
$dropdown-link-color: $inverse;
// $dropdown-fallback-border;
// $dropdown-border;
// $border-radius-base;


//== Iconbar
//
//##

$iconbar-background:         mix($brand-primary, black, 85%);


//== Progress bars
//
//##

$progress-height:            12px;


//== Slider
//
//##

$slider-height:              12px;
$slider-value-font-size:     floor($component-font-size-base * 0.867); // ~13px;

$slider-handle-bg:           mix($brand-secondary, black, 85%);
$slider-handle-hover-bg:     mix($brand-secondary, white, 80%);
$slider-handle-active-bg:    mix($brand-secondary, black, 85%);

$slider-range-bg:            $brand-secondary;

$slider-segment-bg:          mix(desaturate($brand-primary, 15%), white, 20%);


//== Switch
//
//##

$switch-border-radius:       30px;
$switch-width:               80px;


//== Thumbnails
//
//##

//** Padding around the thumbnail image
$thumbnail-padding:           4px;
//** Thumbnail background color
$thumbnail-bg:                $body-bg;
//** Thumbnail border color
$thumbnail-border:            $gray-light;
//** Thumbnail border radius
$thumbnail-border-radius:     $border-radius-large;

//** Custom text color for thumbnail captions
$thumbnail-caption-color:     $text-color;
//** Padding around the thumbnail caption
$thumbnail-caption-padding:   9px;


// Form states and alerts
//
//## Define colors for form feedback states and, by default, alerts.

$state-success-text:          $brand-success;
$state-success-bg:            #dff0d8;
$state-success-border:        darken(adjust-hue($state-success-bg, -10), 5%);

$state-info-text:             $brand-info;
$state-info-bg:               $gray-dark;
$state-info-border:           darken(adjust-hue($state-info-bg, -10), 7%);

$state-warning-text:          $brand-warning;
$state-warning-bg:            #fcf8e3;
$state-warning-border:        darken(adjust-hue($state-warning-bg, -10), 5%);

$state-danger-text:           $brand-danger;
$state-danger-bg:             #f2dede;
$state-danger-border:         darken(adjust-hue($state-danger-bg, -10), 5%);

//== Alerts
//
//## Define alert colors, border radius, and padding.

$alert-padding:               15px !default;
$alert-border-radius:         $border-radius-small !default;
$alert-link-font-weight:      bold !default;

$alert-success-bg:            $state-success-bg !default;
$alert-success-text:          $state-success-text !default;
$alert-success-border:        $state-success-border !default;

$alert-info-bg:               $state-info-bg !default;
$alert-info-text:             $state-info-text !default;
$alert-info-border:           $state-info-border !default;

$alert-warning-bg:            $state-warning-bg !default;
$alert-warning-text:          $state-warning-text !default;
$alert-warning-border:        $state-warning-border !default;

$alert-danger-bg:             $state-danger-bg !default;
$alert-danger-text:           $state-danger-text !default;
$alert-danger-border:         $state-danger-border !default;

// Code
//
//##

$code-color:                  #c7254e;
$code-bg:                     #f9f2f4;

$kbd-color:                   $inverse;
$kbd-bg:                      $brand-primary;

$pre-bg:                      $inverse;
$pre-color:                   inherit;
$pre-border-color:            mix($brand-primary, $inverse, 12%);
$pre-scrollable-max-height:   340px;
$pre-border-radius:           $border-radius-large;


// Type
//
//##

//** Text muted color
$text-muted:                  $gray-light;
//** Abbreviations and acronyms border color
$abbr-border-color:           $gray-light;
//** Headings small color
$headings-small-color:        inherit;//mix($brand-primary, $inverse, 12%);
//** Blockquote small color
$blockquote-small-color:      inherit;
//** Blockquote border color
$blockquote-border-color:     mix($brand-primary, $inverse, 12%);
//** Page header border color
$page-header-border-color:    mix($brand-primary, $inverse, 12%);


// Miscellaneous
//
//##

//** Hr border color
$hr-border:                   mix($brand-primary, $inverse, 63%);

//** Horizontal forms & lists
$component-offset-horizontal: 180px;

$drawer-width: 29.5rem;
$sidebar-closed-width: 7rem;